<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>	

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Tutorial: HelloWorld</title>
    <script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
    <script type="text/javascript" src="common.js" ></script>
    <script type="text/javascript" src="graph.js" ></script>
    <script type="text/javascript" src="js/project.js" ></script>
    <link rel="stylesheet" type="text/css" href="css/project.css" media="screen" />
  </head>
  <body class="yui3-skin-sam">
    <h1>GraphApp</h1>
    <script>
      YUI().use('node', 'event', function (Y) {
			
        // Your code goes here!
      });
		
      YUI().use('button', function (Y) {
        // Button is available and ready for use. Add implementation
        // code here.
      });
				
      YUI().use('slider', function (Y) {
        // Slider is available and ready for use. Add implementation
			 
        // Default everything
        var slider = new Y.Slider();
        slider.render("#slider-bg");

      });
    </script>

    <div>
      <h2>Edit Functions</h2>
      <button class='yui3-button' id="addNodeButton">Neuen Knoten erzeugen</button>
      <button class='yui3-button' id="deleteNodeButton">Markierten Knoten löschen</button>
      <button class='yui3-button' id="addEdgeButton">Neue Kante erzeugen</button>
      <button class='yui3-button' id="deleteEdgeButton">Markierte Kante löschen</button>

      <button class='yui3-button' id="loadButton">Laden</button>
      <button class='yui3-button' id="saveButton">Speichern</button>
    </div>
    <div>
      <h2>Canvas</h2>
      <div id="graphPool_outer">
        <div id="graphPool">
          <div id="node-2" class="node"><span>2</span></div>
          <div id="node-3" class="node"><span>3</span></div>
        </div>
      </div>
      <script>
//        YUI().use('graphics', function (Y)
//        {
//          //create a graphic instance
//          var mygraphic = new Y.Graphic({autoSize:true, y: 200, render:"#graphContainer"});
//
//          //create an ellipse with addShape
//          var myellipse = mygraphic.addShape({
//            type: "ellipse",
//            fill: {
//              color: "#9aa"
//            },
//            stroke: {
//              weight: 2,
//              color: "#000"
//            },
//            width: 150,
//            height: 100,
//            x: 35,
//            y: 35
//          });
//        });
      </script>

    </div>
    <div>
      <h2>Traversierungsalgorithmus</h2>

      <label for="searchValueInput" >Sucheingabe</label>
      <input type="text" name="searchValueInput">

      <div id="traverseContainer">
        <button class='yui3-button'>Tiefentraversierung</button>
        <button class='yui3-button'>Breitentraversierung</button>
      </div>

      <div id="slider-bg" ></div>

      <button class='yui3-button' id="startButton">Start</button>
      <button class='yui3-button' id="stopButton">Stop</button>
      <button class='yui3-button' id="pauseButton">Pause</button>
      <button class='yui3-button' id="stepButton">Step</button>
    </div>

  </body>
</html>